<!--服务详情-->
<template>
	<view class="container">
		
			<top-bar></top-bar>
		
		<view class="carousel" v-if="servInfo.carouselFigurePhoto && servInfo.carouselFigurePhoto.length>0">
			<swiper indicator-dots circular=true duration="400" @change="swiperChange" :autoplay="true">
				<swiper-item class="swiper-item" v-for="(item,index) in servInfo.carouselFigurePhoto" :key="index">
					<view class="image-wrapper" >
						<image :src="item" class="loaded"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-dot-page" v-if="servInfo && servInfo.carouselFigurePhoto">{{ swiperCurrent + 1 }} /
				{{ servInfo.carouselFigurePhoto.length }}
			</view>
		</view>
		<view class="carousel" v-else>
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" >
					<view class="image-wrapper" >
						<image src="/static/noPic.png" class="loaded"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-dot-page">1/1
			</view>
		</view>

		<view class="introduce-section">
			<view class="price-box">
				<text class="title">{{servInfo.servName}}</text>
				<text>￥</text>
				<text class="price">{{servInfo.defaultFee}}</text>
				<text class="unit">起</text>
				<!-- <text class="m-price">¥原价98</text> -->
				<!-- <view class="sales-tip">销量: {{servInfo.sales}}</view> -->
				<!-- <view class="sales-tip to-shop" @click="_toShop()">去店铺</view> -->
			</view>
			<view class="intro" v-if="servInfo.servDesc">
				描述：{{servInfo.servDesc}}
			</view>
			<view class="tags">
				<text class="name">{{ servInfo.hktName }}</text>
			</view>
		</view>

		<view class="tag-section">
			<view>
				<text class="cuIcon-selectionfill icon"></text><text>{{ servInfo.keyword }}</text>
			</view>
			<!-- <view>
				<text class="cuIcon-choicenessfill icon"></text><text>保修90天</text>
			</view>
			<view>
				<text class="cuIcon-peoplefill icon"></text><text>3-5分钟响应</text>
			</view>
			<view>
				<text class="cuIcon-rechargefill icon"></text><text>价格优惠</text>
			</view> -->
		</view>
		<!--    收费标准-->
		<view class="fee-section">
			<view class="title">收费标准</view>
			<view class="intro">因型号、维修难度、品牌不同，最终价格有所差异：</view>
		
			<!-- 费用项 -->
			<!--<uni-collapse @change="change" class="margin-top fee-content">
				<uni-collapse-item v-for="(item,index) in feeList" :title="item.isDefault == 'F'?item.typeName+'(必选)':item.typeName" :key="index" :open="index==0">
					<uni-table border class="fee-table">
						<uni-tr v-show="false">
							<uni-th align="center" :with="50"> </uni-th>
							<uni-th align="center" :with="100"> </uni-th>
						</uni-tr>
						<uni-tr v-for="(fee,index1) in item.housekeepingFeeConfigs" :key="index1">
							<uni-td align="center" with="50px">{{ fee.feeName }}</uni-td>
							<uni-td align="center" with="100px">{{ fee.feePrice }}</uni-td>
						</uni-tr>
					</uni-table>
				</uni-collapse-item>
			</uni-collapse>-->
			
			<view v-for="(item,index) in feeList" :key="index" :open="index==0" class="detail">
				<view class="title">{{ item.isDefault == 'F'?item.typeName+'(必选)':item.typeName }}</view>
				<view v-for="(fee,index1) in item.housekeepingFeeConfigs" :key="index1" class="item">
					<text class="label">{{ fee.feeName }}</text>
					<text class="value">￥{{ fee.feePrice }}</text>
				</view>
			</view>
		</view>

		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<rich-text :nodes="servInfo.context"></rich-text>
		</view>

		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header">
				<text class="tit">用户评价</text>
				<text>({{commentTotal}})</text>
				<text class="tip">100%好率</text>
				<!-- <text class="cuIcon-right"></text>-->
			</view>
			<view class="eva-box" v-for="(comment,index) in commentList" v-if="commentList.length" :key="index">
				<image class="portrait"
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F878a6c57bed136d9d176a6eb8289a04787b126bf.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625738731&t=d3972471013c8aab98dffbdaad28d8cd"
					mode="aspectFill"></image>
				<view class="right">
					<view class="name-block">
						<text class="name">张*</text>
						<view class='icon'>精选</view>
					</view>

					<text class="con">{{ comment.context }}</text>
					<view class="bot">
						<text class="attr">购买类型：</text>
						<text class="time">{{ comment.createTime }}</text>
					</view>
				</view>
			</view>
			<view class="eva-box" v-else>
				<vc-empty :isFixed="false" :emptyData="emptyData"></vc-empty>
			</view>
		</view>
		

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="flex">
				<!-- <view class="p-b-btn" @click="toHome">
					<text class="yticon cuIcon-home"></text>
					<text>首页</text>
				</view> -->
				<view class="p-b-btn" @click="_toShop">
					<text class="yticon cuIcon-home"></text>
					<text>店铺</text>
				</view>
				
				<view class="p-b-btn" @click="toTel">
					<text class="yticon cuIcon-phone"></text>
					<text>咨询</text>
				</view>
				<!-- <view class="p-b-btn cart-btn" @click="toCart()"> -->
					<!-- <text class="cu-tag badge cart-num">1</text> -->
					<!-- <text class="yticon cuIcon-cart"></text> -->
					<!-- <text>购物车</text> -->
				<!-- </view> -->
			</view>
			<view class="action-btn-group">
				<!-- <button type="primary" class="action-btn no-border buy-now-btn" @tap="addCart">加入购物车</button> -->
				<button type="primary" class="action-btn no-border add-cart-btn" @click="toOrder">立即下单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import topBar from "@/components/top-bar/top-bar.vue";
	import {
		getHousekeepingServList,
		getServFeeConfig
	} from "../../api/homemaking/homemakingApi"
	import {
		formatRichText
	} from '../../lib/java110/utils/ImageUtil.js'
	import {
		saveStoreCart
	} from '../../api/order/orderApi.js'

	import {
		getUserId
	} from '../../api/user/userApi.js'
	import param from "../../constant/param"

	import {
		getShops
	} from '../../api/shop/shopApi.js'
	import {
		queryShopAppraise
	} from "../../api/goods/goodsApi"
	import mapping from '../../lib/java110/java110Mapping.js'
	export default {
		components: {topBar},
		data() {
			return {
				specClass: 'none',
				specSelected: [],
				swiperCurrent: 0, //轮播下标
				favorite: true,
				feeList: [],
				servId: '',
				servInfo: {},
				commentList: {},
				commentTotal: 0,
				emptyData: {
					img: '/static/imgs/empty/comment_empty.png',
					tip: '暂无评价~'
				},
				shop: {},
				shopId: ''
			};
		},
	 async onLoad(options) {
		 await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			this.servId = options.servId
			this.shopId = options.shopId;
			console.log("options",options)
			this._getHousekeepingServ();
			this.initServData()
			this._loadShop();
		},
		methods: {
			// 轮播图切换
			swiperChange: function(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			initServData() {
				let _that = this
				let params = {
					page: 1,
					row: 10,
					servId: this.servId,
					// 大类查询，不用传
					shopId: ''
				}
				getServFeeConfig(params)
					.then(function(result) {
						let feeList = result.data
						_that.feeList = feeList
						console.log(_that.feeList);
					})
				_that.getCommentList();
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})

			},
			// 服务评论
			getCommentList: function() {
				let that = this;
				queryShopAppraise({
					shopId: that.shopId,
					objId: that.servId,
					page: 1,
					row: 20
				}).then(_data => {
					that.commentList = _data.data;
					that.commentTotal = _data.total;
					console.log('comment', that.commentList);
				})

			},
			_getHousekeepingServ() {
			  let _that = this
			  let params = {
			    page: 1,
			    row: 1,
				servId:_that.servId,
			   // hktId: this.hktId,
			    // 大类查询，不用传
			    shopId: ''
			  };
			  getHousekeepingServList(params)
			      .then(function (result) {
			        let servList = result.data;
					_that.servInfo = servList[0];
					_that.servInfo.context = formatRichText(_that.servInfo.context);
			      })
			},
			toOrder() {
				this.vc.loginAuth();
				this.vc.navigateTo({
					url: `/pages/homemaking/createOrder?shopId=` + this.servInfo.shopId + '&servId=' + this
						.servInfo.servId
				})
			},
			addCart: function() {
				let _that = this;
				this.vc.loginAuth();
				let _dataObj = {
					productId: _that.servInfo.servId,
					shopId: _that.servInfo.shopId,
					storeId: _that.servInfo.storeId,
					personId: getUserId(),
					cartNum: 1,
					valueId: _that.servInfo.servId,
					cartType: param.CART_TYPE.HOMEMAKING
				};
				saveStoreCart(_dataObj).then((data) => {
					if (data.code == 0) {
						this.vc.toast({
							icon: 'none',
							title: '添加成功'
						})
					}
				})

			},
			toCart: function() {
				this.vc.loginAuth();
				//是否来自于HC的嵌套
				let _mallFrom = uni.getStorageSync(mapping.MALL_FROM)
				if(!_mallFrom && _mallFrom != ''){
					uni.switchTab({
						url:'/pages/shopIndex/cart?shopId='+this.shopId
					})
					return ;
				}
				this.vc.navigateTo({
					url: '/pages/order/order?stat=1001'
				});
			
			},
			_loadShop: function() {
				let _that = this;
				getShops({
					shopId: this.shopId,
					page: 1,
					row: 1
				}).then(_data => {
					_that.shop = _data[0]
				})
			},
			toTel: function() {
				let _that = this;
				uni.makePhoneCall({
					// 手机号
					phoneNumber: _that.shop.returnLink,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			toHome:function(){
				this.vc.navigateHome({
					url:'homemaking'
				})
			},
			_toShop:function(){
				this.vc.navigateTo({
					url:'/pages/homemaking/shop?shopId='+this.shopId
				})
			}

		},

	}
</script>

<style lang='scss' scoped>
	page {
		background: $page-color-base;
		padding-bottom: 120rpx;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 520upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dot-page {
			display: flex;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			line-height: 44rpx;
			border-radius: 22rpx;
			padding: 0 15rpx;
			background: rgba(#333, 0.3);
			font-size: 28rpx;
			color: rgba(#fff, 0.9);
		}

	}

	/* 标题简介 */
	.introduce-section {
		color: #FFE6CD;
		padding: 15rpx 30rpx 20rpx 30rpx;
		background: linear-gradient(90deg, #645747, #534238);
		.price-box {
			display: flex;
			align-items: baseline;
			font-size: 24rpx;
			.title {
				margin-right: 10rpx;
			}
			.unit {
				margin: 0 10rpx;
			}
			.price {
				font-size: 42rpx;
			}
		}
		.intro {
			font-size: 24rpx;
			margin-top: 12rpx;
		}
		.tags {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			margin-top: 18rpx;
			.name {
				display: flex;
				height: 32rpx;
				color:#645747;
				padding: 0 10rpx;
				border-radius: 5rpx;
				background: #FFE6CD;
			}
		}
	}

	/* 标签 */
	.tag-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		color: #645747;
		font-size: 28rpx;
		background: linear-gradient(left, #F9F1F1, #EBF4Fb);
		padding: 0 30rpx;
		.icon {
			margin-right: 8rpx;
		}
		.tag-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.tag-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		padding: 20upx 30upx;
		margin-top: 20rpx;
		background: #FFF;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			.tip {
				flex: 1;
				color: #909399;
				text-align: right;
				font-size: 24rpx;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		font-size: 24rpx;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			padding-left: 20rpx;
			.name {
				margin-right: 10rpx;
			}
			.name-block {
				display: flex;
				align-items: center;
				.icon {
					color: #926232;
					font-size: 22rpx;
					padding: 0 10rpx;
					border-radius: 5rpx;
					background: #FAF3E8;
				}
			}
			.con {
				margin-top: 15rpx;
			}
			.bot {
				color: #909399;
				margin-top: 10rpx;
			}
		}
	}

	/* 收费标准 */
	.fee-section {
		padding: 35rpx 30rpx 20rpx 30rpx;
		background: #FFF;
		.intro {
			color: #926232;
			font-size: 24rpx;
			margin-top: 15rpx;
		}
		.detail {
			margin-top: 30rpx;
			.title {
				display: flex;
				align-items: center;
				height: 50rpx;
				color: #926232;
				font-size: 24rpx;
				font-weight: 700;
				padding: 0 18rpx;
				background: #FAF3E8;
			}
			.item {
				display: flex;
				align-items: center;
				height: 60rpx;
				font-size: 24rpx;
				border-bottom: 1rpx solid #EEE;
				.label {
					flex: 3;
					padding: 0 18rpx;
				}
				.value {
					flex: 2;
					padding: 0 18rpx;
				}
				&:last-child {
					border: 0;
				}
			}
		}
	}

	/*  详情 */
	.detail-desc {
		margin-top: 20rpx;
		background: #FFF;
		padding: 10upx 30upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	// 底部工具栏
	.page-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		padding: 0 12rpx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
	
		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
	
			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
	
			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}
		}
	
		.cart-btn {
			position: relative;
	
			.cart-num {
				position: absolute;
				right: 5rpx;
				top: 2rpx;
			}
		}
	
		.action-btn-group {
			display: flex;
			/* flex: 1; */
			height: 76rpx;
			border-radius: 100rpx;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			margin-left: 20upx;
			position: relative;
			
			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				min-width: 180rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
				&::after {
					display: none;
				}
			}
			.buy-now-btn {
				background: linear-gradient(to right, #ffac30, #F49300);
			}
			.add-cart-btn {
				background: linear-gradient(to right, #F56C6C, #fa436a);
			}
		}
	}
</style>
